<script setup lang="ts">
import { ref, watch } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { useInfiniteScroll } from "@/composables/useInfiniteScroll";
import { getList, type NeedsInfo } from "@/api/needs";
import { handleToPage } from "@/utils";
import { storeToRefs } from "pinia";
import { useAccountStore } from "@/stores/account";

const { isShowNeedBtn } = storeToRefs(useAccountStore());

const { items: list, isLoading, hasMore, error, resetAndLoad, loadMore } = useInfiniteScroll<NeedsInfo>(getList);

/** 查询参数  */
const queryParams = ref({});

watch(queryParams, (newQueryParams) => {
  console.log("Query Params changed:", newQueryParams);
  resetAndLoad(newQueryParams);
}, { deep: true });

// 页面加载
onLoad(() => {
  resetAndLoad(queryParams.value);
});

// 监听用户下拉动作
onPullDownRefresh(() => {
  resetAndLoad(queryParams.value).finally(() => {
    // 停止当前页面下拉刷新
    uni.stopPullDownRefresh();
  });
});

// 页面滚动到底部的事件
onReachBottom(() => loadMore());
</script>

<template>
<view class="relative overflow-hidden">
  <view class="sticky top-0">
    <uv-navbar bgColor="transparent" leftIcon="" title="" placeholder></uv-navbar>
  </view>
  
  <view class="mx-4 mt-5 mb-5 relative flex items-center justify-between">
    <image class="absolute -top-6 left-0 w-24" src="https://static.minglvtang.com/images/needs_tooltip.png" mode="widthFix" />
    <view class="text-(4xl black/80) font-700">全部需求</view>
    <image class="size-16" src="https://static.minglvtang.com/images/bg_needs_header.png" mode="widthFix" />
  </view>

  <page-list :list="list" :hasMore="hasMore" :isLoading="isLoading" :loadMore="loadMore">
    <view 
      class="relative mx-4 mt-3 p-3 grid grid-cols-[auto_1fr] rounded-lg border-(~ solid black/4) bg-white intrinsic-h-29" 
      v-for="item in list" :key="item.id" 
      @click="handleToPage(`/pages/need/detail?id=${item.id}`)"
    >
      <view class="text-(xs #666666) pb-3 border-b-(~ solid #E5E5E5) col-span-2 mb-2">需求编号：{{item.id}}</view>
      <image class="size-14 mr-2" src="https://static.minglvtang.com/images/icons/needs_warn.png" :fade-in="true" :lazy-load="true" mode="aspectFill" />
      <view class="grid items-center">
        <view class="flex items-center">
          <view class="text-(sm #333333) line-clamp-1">{{item.title}}</view>
          <view class="i-ri-arrow-right-s-line"></view>
        </view>
        <view class="text-(sm #666666) line-clamp-1">{{item.desc}}</view>
      </view>
    </view>
  </page-list>

  <view class="h-25" v-if="isShowNeedBtn">
    <view class="w-86 fixed bottom-5 left-50% -translate-x-50% z-10">
      <view 
        class="pt-8 bg-([url(https://static.minglvtang.com/images/bg_needs_post.png)] contain no-repeat center)"
        @click="handleToPage('/pages/need/post')"
      >
        <view class="h-10 text-(lg white) flex items-center justify-center rounded-lg shadow-lg shadow-#1373FF/30">发布需求</view>
      </view>
      <!-- #ifdef H5 -->
      <view class="h-[--window-bottom]"></view>
      <!-- #endif -->
    </view>
  </view>
  
</view>
</template>
